<template>
  <div class="activity-body">
    <div class="activity-ad">
      <!-- <span class="fixed-notice">
        注:活动期间, 活动期间,活动期间,活动期间,活动期间活动期间活动期间
      </span> -->
    </div>

    <!-- <div :class="[actInd % 2 === 0 ? 'bg-orange' : 'bg-yellow', 'combination-container']" v-for="(activityItem, actInd) in openedActList" :key="actInd">
      <div class="activity-head-box">
        <span class="title">{{activityItem.name}}</span>
        <router-link :to="{name: 'ScreenActivity', params: {activityId: activityItem.id}, query:{bannerUrl: activityItem.detailBannerImgUrl}}" class="more right">查看更多>></router-link>
        <span class="discount">
          <img src="./img/fire.png" class="fireimg" />
          <span class="smalltitle">{{disArrToString(activityItem.discountRuleVOS)}}</span>
        </span>
      </div>
      <div class="activity-wrap">
        <FullProduct :productList="activityItem.activityProductVOS" :fielsStatus="fielsStatus" @refresh="getFullProduct"></FullProduct>
      </div>
    </div> -->
    <div class="full-activity-box">
      <template v-for="(activityItem, actInd) in openedActList">
        <router-link :to="{name: 'ScreenActivity', params: {activityId: activityItem.id}, query:{bannerUrl: activityItem.detailBannerImgUrl}}" class="activity-item">
          <img :src='imgSrc[activityItem.name]' alt=""/>
        </router-link>
      </template>
    </div>
  </div>
</template>

<script>
import FullProduct from './components/index'
import { mapActions } from 'vuex'
export default {
  name: 'activityfull',
  components: {
    FullProduct
  },
  data () {
    return {
      fielsStatus: 0, // 活动进行状态
      openedActList: [], // 活动数组
      imgSrc: {
        '仲夏优惠-U钻专区': require('./img/product_1.png'),
        '仲夏优惠-车刀杆专区': require('./img/product_2.png'),
        '仲夏优惠-铣刀杆/铣刀盘专区': require('./img/product_3.png'),
        '仲夏优惠-刀柄专区': require('./img/product_4.png'),
        '仲夏优惠-PCD刀片专区': require('./img/product_5.png'),
        '仲夏优惠-槽刀杆专区': require('./img/product_6.png'),
        '仲夏优惠-槽刀片专区': require('./img/product_7.png')
      }
    }
  },
  methods: {
    ...mapActions(['getActivityFull', 'fetchActivityId']),
    // 折扣数组换成文字
    disArrToString (arr) {
      // let str = ''
      if (!Array.isArray(arr)) return
      let result = arr.reduce((pre = '', cur) => {
        return pre + `满${cur.num}件享${Math.round(cur.discount * 1000) / 100}折,`
      }, '')
      return result.slice(0, result.length - 1)
    },
    getFullProduct () {
      this.getActivityFull().then(res => {
        this.openedActList = null
        this.openedActList = (res && res.voList) || {}
        // 周周活动结束
        let len = this.openedActList.length
        // if (!(this.openedActList.length)) {
        //   this.fielsStatus = 2
        //   return
        // }
        len ? this.fielsStatus = 1 : this.fielsStatus = 0
        // this.$store.commit('BRANDID', this.openedActList.brandVOS[0]['id'])
        // let startTimeParm = this.openedActList.startTime
        // let endTimeParm = this.openedActList.endTime
        // const starTimeStamp = (new Date(startTimeParm.replace(/-/g, '/'))).getTime()
        // const endTimeStamp = (new Date(endTimeParm.replace(/-/g, '/'))).getTime()
        // let nowTime = (new Date()).getTime()
        // 周周活动开始
        // if (nowTime > starTimeStamp && nowTime <= endTimeStamp) {
        //   this.fielsStatus = 1
        //   // this.startCountFn(endTimeParm)
        //   return
        // }
        // // 周周活动还未开始
        // if (nowTime < starTimeStamp) {
        //   this.fielsStatus = 0
        //   // this.startCountFn(startTimeParm)
        // }
        // // 周周活动结束
        // if (nowTime > endTimeStamp) {
        //   this.fielsStatus = 2
        // }
      })
    }
  },
  mounted () {
    this.getFullProduct()
    this.fetchActivityId()
  }

}
</script>

<style lang="scss" scoped>
$red:#DF2600;
$orange: #FF6D4F;
$yellow: #FFD770;
.bg-orange{
  background: $orange;
}
.activity-body{
  background: #FF6D4F
}
.full-activity-box{
  width:1190px;
  margin: 0 auto;
  padding: 55px 0 50px;
}
.activity-item{
  display: inline-block;
  width: 585px;
  margin-right: 20px;
  margin-bottom: 38px;
  &:nth-child(2n){
    margin-right: 0;
  }
  img{
    width: 100%;
  }
}
.fixed-notice{
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  color: #fff;
}
.activity-ad{
  width: 100%;
  height: 520px;
  background-image: url("./img/banner.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.combination-container{
  padding-top: 60px;
}
.activity-head-box{
  width:1190px;
  margin: 0 auto;
  height: 58px;
  line-height: 58px;
  background: $red;
  padding: 0 30px;
  color: #fff;
  box-sizing: border-box;
  .title{
    font-size: 18px;
  }
  .discount{
    float: right;
    font-size: 0;
  }
  .fireimg{
    width: 20px;
    margin-right: 16px;
    vertical-align: middle;
  }
  .smalltitle, .more{
    font-size: 16px;
    vertical-align: middle;
  }
  .more{
    color: #fff;
    padding-left: 80px;
  }

}
.activity-wrap{
  width: 1190px;
  margin: 20px auto 0;
  padding-bottom: 70px;
}
</style>
